<template>
	<view>
		<loading ref="loading"></loading>
		<u-navbar :is-back="true" title="专题详情" :background="background" :back-icon-color="vk.getVuex('$app.config.color.navbar')" :title-color="titleColor" :border-bottom="false"></u-navbar>
		<view :style="{marginTop: navHeight*-1+'rpx'}"></view>
		<view class="special">
			<image :src="specialDetail.image" @load="play" mode="aspectFill"></image>
		</view>
		<view class="cont" :style="{background: vk.getVuex('$app.config.bg.main')}">
			<view class="special">
				<view class="u-p-l-40 u-p-r-40 u-p-t-20 u-p-b-20">
					<view class="title u-font-17 u-p-b-20 u-p-t-20" :style="{color: vk.getVuex('$app.config.color.main')}">{{specialDetail.title}}</view>
					<view class="content u-font-13" :style="{color: vk.getVuex('$app.config.color.light')}">{{specialDetail.content}}</view>
				</view>
			</view>
			<view class="">
				<view class="u-flex u-row-left u-flex-wrap u-p-l-20 u-p-t-20">
					<block v-for="(item, index) in coverList" :key="index">
						<block v-for="(item_, index_) in item.images_" :key="index_">
							<view class="tab" v-if="item_.ind != 0 && item_.ind % 18 === 0">
								<view class="" style="width: 710rpx;">
									<ad v-if="vk.getVuex('$setting.client.banner_id')" :unit-id="vk.getVuex('$setting.client.banner_id')" type="banner" ad-theme="black"></ad>
								</view>
							</view>
							<view class="tab" @click="detail(item._id, index_)">
								<!-- <image lazy-load :src="item_.img+(vk.getVuex('$setting.thumb.cover_flag')===1?vk.getVuex('$setting.thumb.cover_style'):'')" mode="aspectFill"></image> -->
								<muqian-lazyLoad width="226rpx" height="360rpx" :src="item_.img + (vk.getVuex('$setting.thumb.cover_flag') === 1 ? vk.getVuex('$setting.thumb.cover_style') : '')"></muqian-lazyLoad>
							</view>
						</block>
					</block>
				</view>
			</view>
		</view>
		
		<view class="" v-if="!noData">
			<u-loadmore :status="loadStatus" font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8"/>
		</view>
		<nodata v-else height="25vh"></nodata>
		
		<view class="safe-area-inset-bottom">
			<view class="" style="height: 1rpx;"></view>
		</view>
		
		<view @click="backTop" class="back backTop u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/backtop.png" style="width: 36rpx;height: 36rpx;"></image>
			<view class="text">顶部</view>
		</view>
		<view @click="search" class="back backSearch u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/search_t.png" style="width: 30rpx;height: 30rpx;"></image>
			<view class="text">搜索</view>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync()
	// px转换到rpx的比例
	let pxToRpxScale = 750 / systemInfo.windowWidth;
	// 状态栏的高度
	let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
	// 导航栏的高度
	let navigationHeight = 44 * pxToRpxScale
	// 总高度
	let navHeight = ktxStatusHeight + navigationHeight
	export default {
		data() {
			return {
				bColor: '',
				tColor: '',
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				titleColor: 'rgba(0,0,0,0)',
				navHeight: navHeight,
				
				specialId: '',
				specialDetail: {},
				noData: false,
				
				navbarTop: 0,
				coverList: [],
				pageIndex: 0,
				loadStatus: 'loading',
				// 滚动的位置
				rolldistance: '',
				
				backShow: false,
				imageIndex: 0,
			}
		},
		async onLoad({id,mode}) {
			var that = this
			that.specialId = id
			await that.getDetail(id,mode)
			await that.getList()
			that.bColor = that.colorRgb(that.vk.getVuex('$app.config.bg.navbar'))
			that.tColor = that.colorRgb(that.vk.getVuex('$app.config.color.navbar'))
			that.addView(id)
		},
		methods: {
			play(){
				var that = this
				that.$nextTick(() => {
					that.$refs.loading.closeLoading()
				})
			},
			detail(id,index){
				uni.navigateTo({
					url: '/pages/detail/detail?id='+id+'&index='+index
				})
			},
			async getDetail(id,mode){
				var that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/findId',
					data:{
						dbName: 'bus-wx-special',
						id,
						mode
					}
				});
				if(data.info.status != 1){
					uni.showToast({
						// #ifdef MP-TOUTIAO
						icon: 'fail',
						// #endif
						// #ifndef MP-TOUTIAO
						icon: 'error',
						// #endif
						mask: true,
						duration: 2000,
						title: '该专题暂未上线'
					})
					setTimeout(function(){
						uni.navigateBack()
					},1800)
					return
				}
				that.specialDetail = data.info
			},
			async getList(){
				let that = this;
				that.pageIndex = that.pageIndex + 1
				that.loadStatus = 'loading'
				
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getList',
					data:{
						dbName: 'bus-wx-cover',
						pageIndex: that.pageIndex,
						pageSize: 10,
						whereJson: {
							mode: 0,
							special_id: that.specialId
						},
						sortArr: [{name: '_add_time', type: 'desc'}]
					}
				});
				for (var i=0; i<data.rows.length;i++) {
					var images_ = []
					for (var j=0;j<data.rows[i].images.length;j++){
						images_.push({
							ind: that.imageIndex,
							img: data.rows[i].images[j]
						})
						that.imageIndex++
					}
					data.rows[i].images_ = images_
				}
				that.coverList = that.coverList.concat(data.rows)
				if(data.hasMore) that.loadStatus = 'loadmore'
				else that.loadStatus = 'nomore'
				if(data.total == 0) that.noData = true
				else that.noData = false
			},
			async addView(id){
				var that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/addView',
					data:{
						dbName: 'bus-wx-special',
						id: id
					}
				});
			},
			backTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			colorRgb(color) {
				// 16进制颜色值的正则
				var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
				// 把颜色值变成小写
				color = color.toLowerCase();
				if (reg.test(color)) {
					// 如果只有三位的值，需变成六位，如：#fff => #ffffff
					if (color.length === 4) {
						var colorNew = "#";
						for (var i = 1; i < 4; i += 1) {
							colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
						}
						color = colorNew;
					}
					// 处理六位的颜色值，转为RGB
					var colorChange = [];
					for (var i = 1; i < 7; i += 2) {
						colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
					}
					return colorChange.join(",");
				} else {
					return color;
				}
			}
		},
		onPageScroll(e) {
			this.background.backgroundColor = 'rgba('+this.bColor+','+(e.scrollTop*0.01)+')'
			this.titleColor = 'rgba('+this.tColor+','+(e.scrollTop*0.01)+')'
			if(e.scrollTop > 1000){
				this.backShow = true
			}else{
				this.backShow = false
			}
		},
		async onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			await that.getList()
		},
		onShareAppMessage(res) {
			return {
				title: '这里有超多好看的壁纸免费下载~',
				imageUrl: this.specialDetail.image,
				path: 'pages/index/index?inviteId='+(this.vk.getVuex('$user.userInfo._id')?this.vk.getVuex('$user.userInfo._id'):'')+'&detailId='+this.specialDetail._id+'&type=special'
			}
		}
	}
</script>
<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx 0 0;
	}
	.menu{
		position: fixed;
		left: 0;
		width: calc(100% - 60rpx);
		z-index: 99;
		background-color: #FFFFFF;
	}
	.cont{
		background: #1F1F1F;
		border-radius: 18px 18px 0 0;
		position: relative;
		margin-top: 430rpx;
	}
	.special{
		image{
			width: 100%;
			height: 460rpx;
			position: fixed;
			width: 100%;
		}
		.title{
			color: #FFFFFF;
			font-weight: 550;
		}
		.content{
			color: #808080;
		}
	}
	.tab{
		position: relative;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
		image{
			border-radius: 12rpx;
			width: 226rpx;
			height: 360rpx;
		}
		.array{
			position: absolute;
			top: 18rpx;
			right: 0rpx;
			color: #F8DE52;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 0rpx 12rpx 0 16rpx;
			border-radius: 20rpx 0 0 20rpx;
			font-size: 12px;
		}
	}
	.back{
		position: fixed;
		right: -80rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		padding: 8rpx;
		box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
		transition-property: right;
		transition-duration: 0.6s;
		.text{
			font-size: 12px;
		}
	}
	.backSearch{
		bottom: 200rpx;
		background-color: #efb336;
		.text{
			color: #FFFFFF;
		}
	}
	.backTop{
		bottom: 100rpx;
		background-color: #FFFFFF;
		.text{
			color: #efb336;
		}
	}
	.backTop_show{
		right: 20rpx!important;
	}
	.backTop_hide{
		right: -80rpx!important;
	}
</style>